<!DOCTYPE html>
<!--suppress ALL -->
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head::commonHeaderCustomList('试卷管理',~{::style})">
    <style type="text/css">
        .error {
            color: red;
            border-color: red;
        }

        .error:focus {
            color: red;
            border-color: red;
        }

        .red {
            color: red;
        }

        /* #region 拖拽样式*/
        .draggable-wrap {
            padding: 6px 10px;
            border: 1px dashed #eee;
        }
        .draggable-item {
            margin: 10px;
            background: #4cae4c;
            color: #fff;
            padding: 6px 20px;
            border-radius: 6px;
        }
        /* #endregion 拖拽样式*/
    </style>
<body>
<div class="container">
    <legend style="padding-bottom:15px;" contenteditable="false">选择题目</legend>
    <form class="form-horizontal" method="post" onsubmit="return false;">
        <div id="toolbar">
            <select id="qmodeId" class="form-control" name="qmodeId">
                <option value="0" selected>-题型-</option>
                <option value="1" th:selected="${qmodeId==1}">单选题</option>
                <!--<option value="2" th:selected="${qmodeId==2}">多选题</option>-->
                <option value="3" th:selected="${qmodeId==3}">填空题</option>
                <!--<option value="4" th:selected="${qmodeId==4}">排序题</option>-->
                <option value="5" th:selected="${qmodeId==5}">判断题</option>
                <!--<option value="6" th:selected="${qmodeId==6}">连词成句题</option>-->
                <!--<option value="7" th:selected="${qmodeId==7}">连线题</option>-->
                <option value="8" th:selected="${qmodeId==8}">阅读选择题</option>
                <option value="9" th:selected="${qmodeId==9}">阅读填空题</option>
                <!--<option value="10" th:selected="${qmodeId==10}">划线提问题</option>-->
                <option value="11" th:selected="${qmodeId==11}">作文题</option>
                <!--<option value="12" th:selected="${qmodeId==12}">阅读问答题</option>-->
                <option value="13" th:selected="${qmodeId==13}">翻译题</option>
            </select>
        </div>
        <div>
            <div class="form-group">
                <label class="control-label col-sm-1" style="text-align: center;"><i class="red">*</i>大题标题:</label>
                <div class="col-sm-10" style="text-align: left;">
                    <input class="form-control" id="cnName" type="text" data-toggle="tooltip" data-placement="top" title="请输入大题标题" placeholder="请输入大题标题" required/>
                    <p class="message error hide">错误信息</p>
                </div>
            </div>
        </div>
        <table id="table"></table>
        <legend contenteditable="false"></legend>
        <!--#region 拖拽-->
        <div id="selectDraggable">
            <div class="draggable-wrap" v-show="selectionIds.length">
                <h4>按住一项可拖拽进行排序</h4>
                <draggable v-model="selectionIds">
                    <div
                            v-for="(item, index) in selectionIds"
                            v-if="item"
                            :key="index"
                            class="draggable-item">
                        题目ID {{item}}
                    </div>
                </draggable>
            </div>
        </div>
        <!--#endregion 拖拽-->
        <a id="add" role="button" class="btn btn-info" href="javascript:void(0);" data-loading-text="提交中..." onclick="submitForm(this);"><span class="glyphicon glyphicon-play-circle"></span>添加大题到试卷</a>
        <input type="hidden" th:value="${testServerUrl}" id="testServerUrl">
        <input type="hidden" th:value="${rnd}" id="rnd">
    </form>
</div>

<div th:include="include/onload_js::onloadJSCustomList(~{::script})">
    <script type="text/javascript" src="../../static/js/vue.min.js" th:src="@{/static/js/vue.min.js}"></script>
    <!--#endregion 拖拽组件-->
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
    <script src="https://hnres.etalk365.com/public/lib/Vue.Draggable/2.23.2/vuedraggable.umd.min.js"></script>
    <!--#endregion 拖拽组件-->

    <!-- jquery-validate -->
    <script type="text/javascript" th:src="@{/static/lib/jquery-validate/jquery.validate.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/lib/jquery-validate/additional-methods.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/lib/jquery-validate/messages_zh.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/lib/jquery-validate/jquery.validate.extend.js}"></script>
    <script>
        var $dataTable;
        var selectionIds = [];  //保存选中ids

        /**
         * @description 拖拽组件的使用
         */
        var selectDraggable = new Vue({
            el: '#selectDraggable',
            data: {
                selectionIds: []
            }
        });

        $(document).ready(function () {
            initTable("table");

            $("#qmodeId").on("click", function (e) {
                e.preventDefault();
                $dataTable.bootstrapTable('refresh');
            });

            $dataTable.on('load-success.bs.table', function (data) {//table加载成功后的监听函数
                console.log("load success");
            });

            //选中事件操作数组
            var union = function (array, ids) {
                $.each(ids, function (i, id) {
                    if ($.inArray(id, array) == -1) {
                        array[array.length] = id;
                    }
                });
                return array;
            };

            //取消选中事件操作数组
            var difference = function (array, ids) {
                $.each(ids, function (i, id) {
                    var index = $.inArray(id, array);
                    if (index != -1) {
                        array.splice(index, 1);
                    }
                });
                return array;
            };

            var _ = {"union": union, "difference": difference};

            //绑定选中事件、取消事件、全部选中、全部取消
            $dataTable.on('check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table', function (e, rows) {
                var ids = $.map(!$.isArray(rows) ? [rows] : rows, function (row) {
                    return row.id;
                });
                func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference';
                selectionIds = _[func](selectionIds, ids);
                /** regiond 拖拽数据初始化*/
                console.log(selectionIds)
                selectDraggable.selectionIds.push(selectionIds[selectionIds.length - 1])
                /** regiondend 拖拽数据初始化*/
            });
        });

        //初始化
        function initTable(tableId) {
            $dataTable = $("#" + tableId).bootstrapTable({
                url: '/question/bank/list',
                method: 'post',//请求方式（*）
                contentType: "application/x-www-form-urlencoded",
                dataType: "json",
                idField: "id",//指定主键列
                columns: [
                    {
                        field: 'checked',
                        checkbox: true
                    },
                    {
                        title: '题目ID',//表的列名
                        field: 'id',//json数据中rows数组中的属性名
                        align: 'center'//水平居中
                    },
                    {
                        title: '标题',//表的列名
                        field: 'title',//json数据中rows数组中的属性名
                        align: 'center'//水平居中
                    },
                    {
                        title: '操作',
                        field: 'id',
                        align: 'center',
                        formatter: function (value, row, index) {
                            var name = $("#testServerUrl").val();
                            var rnd = $("#rnd").val();
                            var url = name + 'testPaper/#/?rnd='+ rnd +'&from=CRM&tpid=0&qid=' + value + '&pid=0&sid=0&tokenString=S6AsGHLhri4-VJyGrBfPsbEpD56SNSTScoolBwW7QTbpa65H-QbKisyjsEf9TD1WneWUxynXB7VupWEZWkCQ-A';
                            var pre = "preview('" + url + "')";
                            var p = '<a style="cursor: pointer;" onclick="' + pre + '">预览</a> ';  //row.id为每行的id

                            var ed = "edit('/question/bank/page/edit/" + value + "')";
                            var e = '<a style="cursor: pointer;" onclick="' + ed + '">修改</a> ';  //row.id为每行的id
                            return p + e;
                        }
                    }],
                striped: true, //使表格带有条纹
                search: true,//开启搜索文本框
                toolbar: '#toolbar',
                //showToggle: false, //名片格式
                //cardView: false,//设置为True时显示名片（card）布局
                sidePagination: "server",//使用服务器端分页
                pagination: true, //在表格底部显示分页工具栏
                showRefresh: true, //显示刷新按钮
                //showFooter: false,//显示列脚
                clickToSelect: true,//点击行即可选中单选/复选框
                //sortable: false,//是否启用排序
                //cache: false,
                //strictSearch: true,
                //detailView: false, //是否显示父子表
                //maintainSelected: true,
                queryParams: function (params) {//得到查询的参数
                    //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                    console.log("params:" + JSON.stringify(params));
                    return {
                        qmodeId: $("#qmodeId").val(),
                        search: params.search,
                        pageSize: params.limit,//页面大小
                        pageNum: (params.offset / params.limit) + 1//页码
                        //sort: params.sort,//排序列名
                        //order: params.order
                    };
                },
                responseHandler: responseHandler, //在渲染页面数据之前执行的方法，此配置很重要!!!!!!!
                pageNumber: 1,
                pageSize: 10,//每页大小
                pageList: [10, 25, 50],//可以选择每页大小
                paginationPreText: '上一页',
                paginationNextText: '下一页',
                //toolbar: "#toolbar", //设置工具栏的Id或者class
                formatLoadingMessage: function () {
                    return "正在努力加载数据中，请稍后...";
                },
                formatNoMatches: function () { //没有匹配的结果
                    return '无符合条件的记录';
                }
                //,
                // onClickRow: function (row) {//点击行事件
                //     window.location.href = "/question/bank/preview/" + row.id;
                // }
            });
        }

        $(function () {
            valiForm();
        });

        function preview(url) {
            //iframe窗口
            layer.open({
                type: 2,
                title: false,
                closeBtn: 1, //显示关闭按钮
                shade: 0.4,
                area: ['90%', '90%'],
                content: [url, 'yes'], //iframe的url，no代表不显示滚动条
                end: function () { //此处用于演示
                }
            });
        }

        function edit(url) {
            //iframe窗口
            layer.open({
                type: 2,
                title: false,
                closeBtn: 1, //显示关闭按钮
                // shade: [0],
                shade: 0.4,
                area: ['1200px', '600px'],
                //offset: 'rb', //右下角弹出
                // time: 2000, //2秒后自动关闭
                // anim: 2,
                content: [url, 'yes'], //iframe的url，no代表不显示滚动条
                end: function () { //此处用于演示
                }
            });
        }

        //表格分页之前处理多选框数据
        function responseHandler(res) {
            $.each(res.rows, function (i, row) {
                row.checked = $.inArray(row.id, selectionIds) != -1;  //判断当前行的数据id是否存在与选中的数组，存在则将多选框状态变为true
            });
            return res;
        }

        function valiForm() {
            //表单验证
            $('form').validate({
                focusInvalid: true,
                errorPlacement: function (error, element) {
                    var errorMsg = error[0].innerHTML;
                    var elem = element[0];
                    $(elem).next('.message').removeClass("hide").addClass("error").html(errorMsg).show();
                },
                success: function (element) {
                    var elem = $(element)[0].htmlFor;
                    $(elem).next('.message').hide();
                }
            });
        }

        /*
        * 表单校验
        *
        */
        function checkForm(obj) {
            var status = $(obj).valid();
            if (!status) {
                //没有通过验证
                $("#add").button('reset');
                return false;
            } else {
                return true;
            }
        }

        /*
        * 提交表单
        *
        */
        function submitForm(obj) {
            $(obj).button('loading');

            var form = $("form");

            //表单校验
            if (!checkForm($(form))) {
                $(obj).button('reset');
                return false;
            }

            console.log("添加大题到试卷,id=" + JSON.stringify(selectionIds));
            if (selectionIds.length == 0) {
                $(obj).button('reset');
                layer.msg('必须选择一个题目', {icon: 2});
                return false;
            }

            parent.reloadQuestionDataForPaper($("#cnName").val().trim(), selectionIds);

            $(obj).button('reset');

            parent.layer.closeAll(); //疯狂模式，关闭所有层
        }
    </script>
</div>
</body>
</html>
